import { DEFAULT_NODE_PORTS, DEFAULT_STATUS_COLOR, DEFAULT_STATUS_ICON } from "../metadata"
import { set } from "lodash-es";
// import InvalidUrl from "../../svg/warn-triangle-filled.svg?url";
import processorsUrl from "../../svg/icon-park-outline--ungroup.svg?url"
// import InfoUrl from "../../svg/info-large.svg?url"
import { IPackNifi } from "../../inter";
import {t} from "../../i18n/index"
//
export default {
  width: 80,
  height: 80,
  zIndex:100,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 2,
      fill: 'rgba(255,255,255,1)',
      refWidth: 1,
      refHeight: 1,
      rx: 8,
      ry: 8,
    },
    info: {
      // xlinkHref: InfoUrl,
      event: "node:power",
      width: "16",
      height: "16",
      xAlign: "right",
      refX: "100%",
      refY: "1",
      refX2: "-1",
      cursor: 'pointer',
    },
    infoicon:{
      style:"color:#ddd;",
      class:"i-mingcute:power-fill op-60 hover-op-100"
    },
    // iconbox:{
    //   width: "40",
    //   height: "40",
    //   xAlign: "middle",
    //   yAlign: "middle",
    //   refX: "50%",
    //   refY: "50%",
    //   refY2:-2,
    //   color: "#f00",
    //   fontSize:40,
    //   zIndex:10
    // },
    // icon: {
    //   // xlinkHref: processorsUrl,
    //   style:"width:1em;height:1em;",
    //   class:"icon-other-2"
    //   // refY2:-4,
    // },
    // info: {
    //   xlinkHref: InfoUrl,
    //   event: "node:info",
    //   width: "16",
    //   height: "16",
    //   xAlign: "right",
    //   refX: "100%",
    //   refY: "1",
    //   refX2: "-1",
    //   cursor: 'pointer',
    // },
    icon: {
      xlinkHref: processorsUrl,
      width: "50",
      height: "50",
      xAlign: "middle",
      yAlign: "middle",
      refX: "50%",
      refY: "50%",
      refY2:-5,
      color: "#f00"
      // refY2:-4,
    },
    tipbox:{
      style:"display:none;",
      // relative:true,
      xAlign: "left",
      yAlign: "bottom",
      refX: "0",
      refY:"0",
      refWidth:1,
      refHeight:0,
      fill:"transparent",
    },
    tipdiv:{
      style:"position:absolute;bottom:8px;left:50%;transform:translateX(-50%);overflow:hidden;",
      class:"_tip-box"
    },
    tipcontent:{
      style:"padding:2px 6px;display:flex;gap:4px;justify-content:space-between;",
      class:""
    },
    tiplabel:{
      class:"_tip-label"
    },
    tipvalue:{
      style:"min-width:50px;white-space:nowrap;",
      class:"_tip-value"
    },
    inlabel:{
      html:"In"
    },
    invalue:{
      html:"0 (0 bytes)"
    },
    rwlabel:{
      html:"Read/Write"
    },
    rwvalue:{
      html:"0 bytes / 0 bytes"
    },
    outlabel:{
      html:"Out"
    },
    outvalue:{
      html:"0 (0 bytes)"
    },
    ttlabel:{
      html:"Task/Time"
    },
    ttvalue:{
      html:"0 / 00:00:00.000"
    },
    label: {
      refY: '100%',
      refX: "50%",
      // x:"-50",
      refY2: -2,
      fontSize: 14,
      xAlign: "middle",
      yAlign: "bottom",
      textWrap: {
        width: 70,
        height: "20",
        ellipsis: true,
      }
    },
  },
  markup: [
    { tagName: 'rect', selector: 'body' },
    { tagName: "foreignObject", selector: "info",children:[
      {
        ns:"http://www.w3.org/1999/xhtml",
        tagName:"div",
        selector:"infoicon",
      }
    ] },
    { tagName: "image", selector: "icon" },
    // { tagName:"foreignObject",
    //   selector:"iconbox",
    //   children:[
    //     {
    //       ns:"http://www.w3.org/1999/xhtml",
    //       tagName:"div",
    //       selector:"icon",
    //     }
    //   ] },
    // { tagName: "text", selector: "tip" },
    // { tagName: "image", selector: "info" },
    // { tagName: 'image', selector: 'icon' },
    // {tagName: 'text',selector: 'name' },
    {tagName:"foreignObject",selector:'tipbox',children:[
      {
        ns:"http://www.w3.org/1999/xhtml",
        tagName:"div",
        selector:"tipdiv",
        children:[
          {ns:"http://www.w3.org/1999/xhtml",tagName:'div',groupSelector:"tipcontent",children:[
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon1",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv1",groupSelector:"tipiconvalue"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon2",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv2",groupSelector:"tipiconvalue"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon3",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv3",groupSelector:"tipiconvalue"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon4",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv4",groupSelector:"tipiconvalue"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon5",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv5",groupSelector:"tipiconvalue"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipicon6",groupSelector:"tipicon"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"tipiv6",groupSelector:"tipiconvalue"},
          ]},
          {ns:"http://www.w3.org/1999/xhtml",tagName:'div',groupSelector:"tipcontent",children:[
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"inlabel",groupSelector:"tiplabel"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"invalue",groupSelector:"tipvalue"}
          ]},
          {ns:"http://www.w3.org/1999/xhtml",tagName:'div',groupSelector:"tipcontent",children:[
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"rwlabel",groupSelector:"tiplabel"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',children:[
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',selector:"readvalue",groupSelector:"tipvalue"},
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',textContent:"/"},
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',selector:"writevalue",groupSelector:"tipvalue"}
            ]},
            
          ]},
          {ns:"http://www.w3.org/1999/xhtml",tagName:'div',groupSelector:"tipcontent",children:[
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"outlabel",groupSelector:"tiplabel"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"outvalue",groupSelector:"tipvalue"}
          ]},
          {ns:"http://www.w3.org/1999/xhtml",tagName:'div',groupSelector:"tipcontent",children:[
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',selector:"ttlabel",groupSelector:"tiplabel"},
            {ns:"http://www.w3.org/1999/xhtml",tagName:'div',children:[
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',selector:"taskvalue",groupSelector:"tipvalue"},
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',textContent:"/"},
              {ns:"http://www.w3.org/1999/xhtml",tagName:'span',selector:"timevalue",groupSelector:"tipvalue"}
            ]},
            
          ]},
        ]
      }
    ]},
    { tagName: 'text', selector: 'label' },
  ],

  // 只有用 prop({key:value}) 才会触发 prophoooks
  propHooks(metadata: any) {
    const { label, icon,info,power  } = metadata;
    //
    if(power != undefined){
      set(metadata, 'attrs.tipbox.style', `display:${power > -1 ? 'block' : 'none'}`)
      set(metadata,"attrs.infoicon.style",`color:${power > -1 ? '#67C23A' : '#ddd'}`)
    }
    if (icon) { set(metadata, 'attrs.icon.xlink:href', icon) }
    if (label) { set(metadata, 'attrs.label.text', label) }
    if(info){
      const {input,output,read,written,tasks,tasksDuration} = info;
      input && set(metadata,"attrs.invalue.html",input);
      read && set(metadata,"attrs.readvalue.html",read);
      written && set(metadata,"attrs.writevalue.html",written);
      // (read || written) && set(metadata,"attrs.rwvalue.html",`${read}/${written}`);
      output && set(metadata,"attrs.outvalue.html",output);
      tasks && set(metadata,"attrs.taskvalue.html",tasks);
      tasksDuration && set(metadata,"attrs.timevalue.html",tasksDuration);
    }
    return metadata;
  }
}


